<template>
	<view>
		<uni-popup ref="returnMessage" type="message">
			<uni-popup-message type="success" :message="returnMessage" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="continueMessage" type="message">
			<uni-popup-message type="success" :message="continueMessage" :duration="2000"></uni-popup-message>
		</uni-popup>

		<uni-list-item :disabled="true" title="图书信息"></uni-list-item>
		<!-- 图书信息 -->
		<uni-list-item link to="" @click="">
			<template v-slot:header>
				<img style="width: 100px;" :src="showBook.url" alt="">
			</template>
			<template v-slot:body>
				<view class="content">
					<view style="font-weight: 700;">
						{{showBook.name}}
					</view>

					<view>
						作者:
						{{showBook.author}}
					</view>
					<view>
						ISBN:
						{{showBook.isbn}}
					</view>
					<view>
						出版社:
						{{showBook.publish}}
					</view>
				</view>
			</template>
		</uni-list-item>
		<uni-list-item :disabled="true" title="详细信息"></uni-list-item>
		<!-- 借阅信息 -->
		<uni-list-item>
			<template v-slot:body>
				<view class="content">
					<view style="font-weight: 700;">
						价格：
						<span class=" stateData" style="color: tomato;">
							￥{{showBook.price}}
						</span>

					</view>
					<view>
						库存数量:
						{{showBook.number}}本
					</view>
					<view>
						书库位置:
						{{showBook.location}}
					</view>
					<view>
						语言:
						{{showBook.language}}
					</view>
					<view>
						所属分类:
						{{ showBook.categoryName? showBook.categoryName.slice(',').join(' | ') : ''}}
					</view>
					<hr />
					<view>
						图书简介:
						{{showBook.introduction }}
					</view>

				</view>
			</template>
		</uni-list-item>
		<button class="button" @click="handleBorrowBook">借阅图书</button>
	</view>
</template>

<script>
	import {
		BookLend,
		getBook,
	} from '@/api/system/borrow.js';

	export default {
		name: "detail",
		data() {
			return {
				bookId: '',
				bookDetail: {},
				returnMessage: "还书成功",
				continueMessage: "续借成功"
			}
		},
		computed: {
			showBook() {
				return this.bookDetail
			}
		},
		onLoad({
			bookId
		}) {
			this.bookId = bookId
			this.getBook()
		},
		methods: {
			// 获取图书信息
			getBook() {
				getBook({
					bookId: this.bookId
				}).then(res => {
					this.bookDetail = res.data.data
				})
			},
			// 借阅图书
			handleBorrowBook() {
				BookLend({
					'bookId': this.bookId
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: res.msg,
							duration: 500,
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/mine/borrow/index'
							})
						}, 500)
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1000,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		/* height: 150px; */
		margin-left: 10px
	}

	.content view {
		margin: 6px;
	}

	.button {
		background-color: #18bc37;
		color: #fff;
		border-radius: 10px;
		margin: 10px;
	}
</style>